<template>
<!-- 这是填写简历页面 -->
    <div id="EditorResume">
         <div class="Header-wrapper">
            <yd-navbar title="填写简历" fontsize="16px" color="#fff" height="45px" bgcolor="#ffd602">
                <router-link to="PersonalIndex" slot="left">
                    <i class="iconfont icon-back Fcolor"></i>
                </router-link>
            </yd-navbar>
        </div>
      <div class="information-wrapper">
        <div class="msg-portrait">
            <div class="head-portrait">
                <span class="portrait-box">
                  <i class="iconfont icon-touxiang fsize"></i>
                </span>
            </div>
            <div class="information-content">
                <ul>
                    <li>
                        <span>{{data.name}}</span>
                        <span v-if='data.sex'>女</span>
                        <span v-else>男</span>
                        <span>23岁</span>
                    </li>
                    <li>手机：{{data.phone}}</li>
                    <li>{{data.deptname}}</li>
                </ul>
            </div>
        </div>
        <router-link to="BaseInformation">
            <div class="information-compile">编辑</div>
        </router-link>
    </div>
       <div class="write-wrapper">
        <div id="resume-box-list">
          <ul>
            <li>
                <group>
                    <cell
                    :arrow-direction="off ? 'up' : 'down'"
                    @click.native="off = !off"
                    >
                    <span v-if="!off" slot="title" class="foldS1">教育经历</span>
                    <span v-else slot="title" class="foldS2">教育经历</span>
                    <i :class="off?' iconfont icon-jianhao':'iconfont icon-add'"></i>
                    </cell>
                    <div class="slide" :class="off?'animate':''">
                       <div class="slide-center" v-for="(list,index) in userDate" :key='index'>
                            <p>{{list.begindate}}－{{list.enddate}}</p>
                            <p>学校:{{list.school}}</p>
                            <p>主修专业:{{list.zhuanye}}</p>
                            <p><span>专长:{{list.goodat}}</span></p><hr/>
                        </div>
                        <div class="after-fill">
                            <router-link to="EducationalExperience" >
                                <span>+添加</span>
                            </router-link>
                        </div>
                    </div>
                </group>
            </li>
            <li>
                 <group>
                    <cell
                    :arrow-direction="off1 ? 'up' : 'down'"
                    @click.native="off1 = !off1"
                    >
                    <span v-if="!off1" slot="title" class="foldS1">社会实践</span>
                    <span v-else slot="title" class="foldS2">社会实践</span>
                     <i :class="off1?' iconfont icon-jianhao':'iconfont icon-add'"></i>
                    </cell>
                    <div class="slide" :class="off1?'animate':''">
                        <div class="slide-center" v-for="(item,index) in userDate0" :key='index'>
                            <p>{{item.begindate}}-{{item.enddate}}</p>
                            <p>公司名称:{{item.gsname}}</p>
                            <p>实践经验:{{item.jtnr}}</p>
                            <hr/>
                        </div>
                        <div class="after-fill">
                            <router-link to="SocialExperience" >
                                <span>+添加</span>
                            </router-link>
                        </div>
                    </div>
                </group>
            </li>
            <li>
                <group>
                    <cell
                    :arrow-direction="off2 ? 'up' : 'down'"
                    @click.native="off2 = !off2"
                    >
                    <span v-if="!off2" slot="title" class="foldS1">应聘优势</span>
                    <span v-else slot="title" class="foldS2">应聘优势</span>
                     <i :class="off2?' iconfont icon-jianhao':'iconfont icon-add'"></i>
                    </cell>
                    <div class="slide" :class="off2?'animate':''">
                        <div class="slide-center">
                            <p v-for="(list1,index) in userDate2" :key='index'><span>{{list1.ypys}}</span></p>
                        </div>
                         <div class="after-fill">
                            <router-link to="advantage" >
                                <span>+添加</span>
                            </router-link>
                        </div>
                    </div>
                </group>
            </li>
          </ul>
      </div>
    </div>
      <div id="resume-box-foot">
         <yd-button size="large" type="primary" @click.native="resume"><div class='foot-content'>提交审核</div></yd-button>
      </div>
    </div>
</template>
<script type="text/babel">
import { Group, Cell } from 'vux'
import apis from '../../../../../static/js/apis.js'
export default {
  data () {
    return {
      show: false,
      off: true,
      off1: true,
      off2: true,
      data: [],
      userDate: [],
      userDate0: [],
      userDate1: [],
      userDate2: []
    }
  },
  created () {
    this.data = JSON.parse(window.localStorage.getItem('userInfo')).member
    console.log(this.data)
    this.$axios
      .post(apis + '/app/school/getresume',
        this.confusion(JSON.stringify({
          userid: this.data.id + ''
        })), {
          headers: {
            Authorization:
            'Bearer ' +
            JSON.parse(window.localStorage.getItem('userInfo')).token,
            'Content-Type': 'application/json',
            'Cache-Control': 'no-cache',
            isApp: 'isApp'
          }
        })
      .then(response => {
        // console.log(response)
        this.userDate = response.data.school
        this.userDate0 = response.data.shsj
        this.userDate1 = response.data.resume
        this.userDate2 = response.data.ypys
        // console.log(this.userDate)
      })
      .catch(error => {
        console.log(error)
      })
  },
  methods: {
    resume () {
      this.$dialog.toast({
        mes: '提交成功',
        callback: () => {
          window.history.go(-1)
        }
      })
    }
  },
  components: {
    Group,
    Cell,
    apis
  }
}
</script>
<style scoped>
.icon-back {
  font-size: 24px;
}
.Fcolor {
  color: #fff;
}
.yd-btn-block {
  margin: 0;
}
.yd-button {
  height: 40px;
  padding: 0 40px;
}
.yd-btn-primary {
  background: #f0f0f0;
}
.auto p {
  width: 100%;
  height: 200px;
}
.auto p .span1 {
  display: inline-block;
  width: 100%;
  height: 200px;
  line-height: 200px;
  margin: 0 auto;
  text-align: center;
}
.auto p .span2 {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  position: absolute;
  right: 0px;
  top: 0px;
}
.icon-touxiang {
  font-size: 80px;
  margin: 0 auto;
  display: block;
  color: #ffd602;
}
a {
  border: none;
}
.information-wrapper {
  width: 100%;
  height: 132px;
  padding: 24px 12px;
  display: flex;
  justify-content: space-around;
  border-bottom: 2px solid #dfdfdf;
  background: #fff;
  overflow: hidden;
}
.msg-portrait {
  flex: 8;
}
.head-portrait {
  margin-right: 15px;
  float: left;
}
.portrait-box {
  display: block;
  width: 70px;
  border-radius: 50%;
  line-height: 70px;
  text-align: center;
  overflow: hidden;
  margin-top: 5px;
  height: 70px;
}
.head-portrait img {
  width: 100%;
  border-radius: 50%;
  height: 100%;
}
.information-content {
  width: 150px;
  float: left;
}
.information-content ul {
  color: #333;
  width: 100%;
  line-height: 24px;
  font-size: 14px;
}
.information-compile {
  width: 41px;
  height: 21px;
  color: #fff;
  line-height: 21px;
  background-color: #ffd602;
  text-align: center;
  border-radius: 7%;
  flex: 2;
}
.fsize {
  font-size: 70px;
  color: #ffd602;
}
.foldS1 {
  font-size: 16px;
}
.foldS2 {
  color: #000;
  float: left;
  font-size: 14px;
}
.icon-add {
  color: #ffd602;
}
.icon-jianhao {
  color: #ffd602;
}
.slide {
  background: #f2f2f2;
  padding: 0 15px;
  overflow: hidden;
  max-height: 0;
  color: #000;
  font-size: 12px;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
}
.slide-center {
  overflow: hidden;
}
.slide p {
  width: 100%;
  height: auto;
  line-height: 30px;
  text-align: left;
}
.animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
  background: #fff;
}
#resume-box-list ul {
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}
#resume-box-list ul li {
  width: 100%;
  height: auto;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #ffd602;
  border-bottom: 1px solid #dfdfdf;
}
.write-wrapper {
  width: 100%;
  overflow-y: auto;
  position: fixed;
  top: 176px;
  bottom: 50px;
  background: #fff;
}
.foot-content {
  width: 80%;
  height: 80%;
  line-height: 43px;
  margin: 0 auto;
  background: #ffd602;
  border-radius: 12px;
}
#resume-box-foot {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.after-fill span {
  line-height: 34px;
  text-align: center;
  font-size: 14px;
  color: #ffd602;
}
</style>
